<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>飘动的图片</title>
    <style>
        img{
            width: 150px;
        }
        #outer {
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="outer">
        <img src="../imgs/我老婆.webp">
    </div>

    <script>
        let x = 0;
        let y = 0;

        let dx = 10;
        let dy = 10;

        let outer = document.getElementById("outer");
        let divH = outer.offsetHeight;
        let divW = outer.offsetWidth;

        // 设置body的高度
        // alert(document.body.clientHeight)
        // documentElement返回根节点
        // document.documentElement返回本文档的根节点即:<html>
        // let bodyH = document.documentElement.clientHeight;//获取可见区域的高度
        // let bodyW = document.documentElement.clientWidth;//获取可见区域的宽度
        // let bodyW = document.body.clientWidth;

        function move() {
            let bodyH = document.documentElement.clientHeight;//获取可见区域的高度
            let bodyW = document.documentElement.clientWidth;//获取可见区域的宽度

            // let bodyH = document.body.clientHeight;//获取body的高度
            // let bodyW = document.body.clientWidth;//获取body的宽度

            if(divH+y>=bodyH || y<0) {
                dy*=-1;
            }
            if(divW+x>=bodyW || x<0) {
                dx*=-1;
            }

            x+=dx;
            y+=dy;

            outer.style.left=x+"px";
            outer.style.top=y+"px";
        }

        let dt = setInterval(move,50);

        outer.onmouseover=function(){
            clearInterval(dt);
        }

        outer.onmouseout=function(){
            dt = setInterval(move,50);
        }
    </script>
</body>
</html>